<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>盒子的边框</title>
  <style>
    div{
      width: 400px;
      height: 100px;
      background-color: pink;
      margin-bottom: 10px;
      text-align: center;
      line-height: 100px;
    }
    /*1. 分别设置盒子的四条边*/
    /*.d1{*/
      /*1.1 设置盒子的上边框*/
      /*border-top-color: blue;*/
      /*border-top-width: 10px;*/
      /*border-top-style: solid;*/
      /*简写为：*/
      /*border-top: blue 10px solid;*/
      /*1.2 设置盒子的右边框*/
      /*border-right-color: red;*/
      /*border-right-style: dotted;*/
      /*border-right-width: 8px;*/
      /*简写为：*/
      /*border-right: red dotted 8px;*/
      /*1.3 设置盒子的下边框*/
      /*border-bottom-color: orange;*/
      /*border-bottom-style: dashed;*/
      /*border-bottom-width: 6px;*/
      /*简写为：*/
      /*border-bottom:  dashed 6px orange;*/
      /*1.4 设置盒子的左边框*/
      /*border-left-color: green;*/
      /*border-left-style: double;*/
      /*border-left-width: 8px;*/
      /*简写为：*/
    /*  border-left: green  8px double ;*/
    /*}*/
    /*1. 设置盒子的四个值（上、右、下、左）*/
    .d1{
      border-width: 10px 8px 6px 8px;
      border-color: blue red orange green;
      border-style: solid dotted dashed double;
    }
    /*2. 设置三个值（上、左右、下）
       第一个值：上边框
       第二个值：左右边框
       第三个值：下边框
    */
    .d2{
      border-color: red blue orange;
      border-width: 5px 10px 15px;
      border-style: dotted solid dashed;
    }
    /*3. 设置两个值情况（上下边框、左右边框）*/
    .d3{
      border-color: red blue;
      border-width: 10px 6px;
      border-style: solid dashed;
    }
    /*4. 设置一个值情况（四条边一样）*/
    .d4{
      /*border-color: red;*/
      /*border-width: 10px;*/
      /*border-style: solid;*/
      /*简写为：*/
      border: red 10px solid;
    }
  </style>
</head>
<body>
<h2>1. 盒子模型-盒子的边框<hr></h2>
<div class="d1">盒子一(设置四个值情况)</div>
<div class="d2">盒子二(设置三个值情况)</div>
<div class="d3">盒子三(设置两个值情况)</div>
<div class="d4">盒子四(设置一个值情况)</div>
</body>
</html>
